<template>
  <div class="login-wrap">
    <el-card>
      <h2 class="title">BackEnd System</h2>
      <el-form
        label-position="top"
        label-width="100px"
        :model="loginForm"
        style="max-width: 460px"
      >
        <el-form-item label="请输入账号">
          <el-input
            v-model="loginForm.userName"
            placeholder="admin test"
            :prefix-icon="User"
          />
        </el-form-item>
        <el-form-item label="请输入密码">
          <el-input
            v-model="loginForm.password"
            placeholder="123456"
            :prefix-icon="Lock"
            type="password"
          />
        </el-form-item>
        <el-form-item>
          <el-checkbox
            v-model="remeberMe"
            label="记住密码"
            size="small"
          />
          <el-checkbox
            v-model="autoLogin"
            label="自动登陆"
            size="small"
            style="margin-left:20px"
          />
        </el-form-item>
      </el-form>
      <footer>
        <button @click="loginHandle">登 陆</button>
        <p class="copyright">@copyright TianZhengXuanYi</p>
      </footer>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { User, Lock } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import useStore from '@/store'
import { loginData } from '@/type/login'
// import { login } from '@/api/login'

const loginForm:loginData = reactive({ userName: 'admin', password: '123456' })
const remeberMe = ref(false)
const autoLogin = ref(false)
const { useUserStore } = useStore()
// const store = useStore()
const router = useRouter()

async function loginHandle() {
  // console.log(loginForm, remeberMe, autoLogin)
  const data = await useUserStore.Login(loginForm)
  console.log('@11111111', data);
  if (data) {
    // console.log('@11111111', data.value);
    router.push({ path: 'app' })
  }
  
  
  // useUserStore.dispatch('Login', loginForm).then(() => {
  //   router.push({ path: 'home' })
  // }).catch(() => {
  //   router.push({ path: 'login' })
  // })
  // const { data: res } = await login(loginForm)
  // console.log(res)
  // if (res.code === 200) {
  //   router.push({ path: 'home' })
  // }
}
</script>

<script lang="ts">
export default {
  name: 'TodoItem',
}
</script>
<style lang="less" scoped>
.login-wrap {
  .title {
    margin-bottom: 20px;
  }
  :deep(.el-card) {
    position: relative;
    width: 480px;
    height: 386px;
    padding: 0 20px;
    border-radius: 10px;
  }
  :deep(.el-form-item) {
    margin-bottom: 20px;
  }
  footer {
    position: absolute;
    bottom: 20px;
    left: 50%;
    width: 100%;
    padding: 0 40px;
    transform: translateX(-50%);

    button {
      width: 100%;
      height: 42px;
      background-image: linear-gradient(to right, #a1c4fd 0%, #c2e9fb 100%);
      line-height: 21px;
      font-size: 20px;
      color: #fff;
      font-weight: 700;
    //   background-image: linear-gradient(to right, orange, purple);
      background-clip: text;
    //   color: transparent;
    }

    .copyright {
        margin-top: 10px;
        text-align: left;
        font-size: 12px;
        color: #ddd;
    }
  }
}
</style>